<script lang="ts">
	import { goto } from '$utils/intercept';
	import Button from '@smui/button';
	import IconButton from '@smui/icon-button';
	import { onMount } from 'svelte';

	let app: HTMLElement | null = null;

	function back_to_top() {
		app?.scrollTo({ top: 0, behavior: 'smooth' });
	}

	function to_cart_list() {
		goto('/cart');
	}

	onMount(() => {
		app = document.getElementById('app');
		const backToTopButton = document.getElementById('backToTop');

		if (!app) return; // 如果 app 不存在，则不执行后续操作
		// 监听滚动事件，显示或隐藏按钮
		const callback = function () {
			if (app && backToTopButton) {
				if (app.scrollTop > 200 || app.scrollTop > 200) {
					backToTopButton.style.display = 'block'; // 显示按钮
				} else {
					backToTopButton.style.display = 'none'; // 隐藏按钮
				}
			}
		};
		if (app.onscroll) {
			app.onscroll = callback;
		} else {
			app.addEventListener('scroll', callback);
		}
		callback(); // 初始化时也执行一次回调函数，确保按钮的初始状态正确
	});
</script>

<div
	id="backToTop"
	class="w-60px shadow-2xl shadow h-60px left-0 bottom-0 fixed bg-white opacity-90"
>
	<Button class="material-icons clear-button-radius h-full font-size-30px" on:click={back_to_top}
		>upload</Button
	>
</div>
<div
	class="z-3 float-button transition-all w-140px shadow-2xl shadow h-60px hover:right-0 right--80px bottom-0 fixed bg-blue-5 opacity-90"
>
	<Button class="h-60px w-full gap-20px" on:click={to_cart_list}>
		<span class="material-icons color-gray-1">shopping_cart</span>
		<span class="button-text color-gray-1">to buy</span>
	</Button>
</div>
